<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_905916_rnkpnvjj7w.css">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-个人设置</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li class="active">积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right_box fl">
                <div class="integral_order_detail">
                    <div class="integral_tit clea_both">
                        <div class="fl intergal_tit_text">订单详情</div>
                        <div class="fr intergal_active">订单状态：<span>{{deal_active}}</span></div>
                    </div>
                    
                    <div class="step_bar">
                        <el-steps :active="active" align-center space='33%'>
                            <el-step title="提交订单" :description="object.payTime"  icon=""></el-step>
                            <el-step title="卖家发货" :description="send_time"  icon=''></el-step>
                            <el-step title="确认收货" :description="spOrderLogisticsList_time"   icon=''></el-step>
                            <el-step title="退换货完成" :description="spOrderReturnsList_time"   icon=''></el-step>
                        </el-steps>
                    </div>
                    <div class="integral_nums">
                        积分 <span>{{payAmount}}</span>
                    </div>
                </div>

                <div class="integral_address">
                    <div class="integral_detail fl">
                        <div class="integral_detail_tit">订单信息</div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">收货人：</span>
                            <span class="fl integral_detail_info">{{spOrderAddr.consigneeRealname}}</span>
                        </div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">收货地址：</span>
                            <span class="fl integral_detail_info">{{spOrderAddr.provinceName}} {{spOrderAddr.cityName}} {{spOrderAddr.districtName}} {{spOrderAddr.consigneeAddress}}</span>
                        </div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">手机号码：</span>
                            <span class="fl integral_detail_info">{{spOrderAddr.consigneeMobilePhone}}</span>
                        </div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">订单编号：</span>
                            <span class="fl integral_detail_info">{{object.orderCode}}</span>
                        </div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">email:</span>
                            <span class="fl integral_detail_info">{{spOrderAddr.email}}</span>
                        </div>
                        <!-- <div class="integral_detail_item">
                            <span class="fl item_tit">卖家：</span>
                            <span class="fl integral_detail_info">天马衡基仪器</span>
                        </div> -->
                    </div>
                    <div class="wuliu fl">
                        <div class="integral_detail_tit">物流信息</div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">快递公司：</span>
                            <span class="fl integral_detail_info" v-if="spOrderLogisticsList!=''">{{spOrderLogisticsList[0].disname}}</span>
                        </div>
                        <div class="integral_detail_item">
                            <span class="fl item_tit">快递单号：</span>
                            <span class="fl integral_detail_info" v-if="spOrderLogisticsList!=''">{{spOrderLogisticsList[0].logisticsNo}}</span>
                        </div>
                    </div>
                </div>

                <div class="integral_goods">
                    <div class="integral_goods_nav">
                        <div class="width_six fl">商品</div>
                        <div class="width_two fl">商品编号</div>
                        <div class="width_two fl">积分</div>
                    </div>
                    <div class="goods_detail" v-for='(item,index) in spOrderDetailList'>
                        <div class="width_six fl">
                            <div class="goods_img fl">
                                <img :src="item.goodsImage" alt="">
                            </div>
                            <p class="goods_name fl">{{item.goodsName}}</p>
                        </div>
                        <div class="width_two fl">
                            <p>{{item.goodsCode}}</p>
                        </div>
                        <div class="width_two fl">
                            <p>{{item.goodsPrice}}</p>
                        </div>
                    </div>
                    <div class="pay_integral">
                        <span class="pay_tit">消耗积分：</span>
                        <span class="pay_detail">{{payAmount}}</span>
                    </div>
                </div>
                

                
            </div>


        </div>





       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
     
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    active: 1,
                    car_active:false,
                    groups:3,
                    id:'',
                    spOrderDetailList:'',
                    payAmount:'',
                    spOrderAddr:'',
                    order_status:'',
                    deal_active:'',
                    spOrderReturnsList:'',
                    spOrderReturnsList_time:'',
                    spOrderLogisticsList_time:'',
                    spOrderLogisticsList:'',
                    send_time:''
                };
            }, 
            created() {
                
            },
            mounted() {
                this.id = this.GetQueryString().id
                console.log(this.id)
                this.findSpOrderById()
            },
            methods: {
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },

                findSpOrderById(){
                    axios({
                        method:"POST",
                        url:base_url + "/spOrder/findSpOrderById",
                        data:Qs.stringify({
                            id:this.id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.object = res.data.data.object
                        app.spOrderDetailList = res.data.data.object.spOrderDetailList
                        app.payAmount = res.data.data.object.payAmount
                        app.spOrderAddr = res.data.data.object.spOrderAddr
                        app.spOrderLogisticsList = res.data.data.object.spOrderLogisticsList
                        app.spOrderReturnsList = res.data.data.object.spOrderReturnsList
                        if (app.spOrderLogisticsList.length==0) {
                            app.spOrderLogisticsList_time=''
                        }else{
                            app.spOrderLogisticsList_time=app.spOrderLogisticsList[0].updateTime
                            app.send_time=app.spOrderLogisticsList[0].createTime
                        }
                        if (app.spOrderReturnsList.length==0) {
                            app.spOrderReturnsList_time=''
                        }else{
                            app.spOrderReturnsList_time = app.spOrderReturnsList[0].updateTime
                        }
                        console.log(app.spOrderReturnsList)
                        
                        // app.order_status = res.data.data.object.orderStatus
                        var order_status = res.data.data.object.orderStatus
                        console.log(order_status)
                        if (order_status==0) {
                            app.deal_active ='未付款'
                        } else if (order_status==1) {
                            app.deal_active ='已付款'
                        } else if (order_status==2) {
                            app.deal_active ='已发货'
                            app.active = 2
                        } else if (order_status==3) {
                            app.deal_active ='已签收'
                            app.active = 3
                        } else if (order_status==4) {
                            app.deal_active ='换货申请'
                        } else if (order_status==5) {
                            app.deal_active ='换货中'
                        } else if (order_status==6) {
                            app.deal_active ='退换货完成'
                            app.active = 4
                        } else if (order_status==7) {
                            app.deal_active ='取消交易'
                        } else if (order_status==2) {
                            app.deal_active ='交易完成'
                        }
                        console.log(app.spOrderDetailList)
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_center(){
                    window.location.href='person_center.html?index='+0
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                }
            }
        })
        
    </script>
</body>

</html>